<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-17 13:19:41
-->
<template>
  <van-dialog
    v-model:show="show"
    title="加密直播间"
    show-cancel-button
    width="300"
    @confirm="handleCheckRoomPwd"
  >
    <van-cell-group inset style="margin: 20px 0">
      <van-field
        v-model="pwd"
        center
        clearable
        label=""
        placeholder="请输入密码"
        :type="type"
      >
        <template #button>
          <van-icon
            name="eye"
            @click="type = 'password'"
            v-show="type === 'text'"
          />
          <van-icon
            name="closed-eye"
            @click="type = 'text'"
            v-show="type === 'password'"
          />
        </template>
      </van-field>
    </van-cell-group>
  </van-dialog>
</template>


<script >
import { defineComponent, onMounted, ref, watch } from "vue";
import { checkLivePwd } from "@/api/live";
import { encruption } from "@/utils/index";
import storage from "@/utils/storage";
export default defineComponent({
  setup(props, { emit }) {
    const show = ref(false);
    const liveId = ref(""); //直播id
    const pwd = ref(""); //密码
    const type = ref("text"); //输入框类型
    const item = ref({}); //直播对象
    const close = () => {
      show.value = false;
    };
    const handleCheckRoomPwd = async () => {
      const res = await checkLivePwd({
        liveId: liveId.value,
        type: 1,
        pwd: encodeURIComponent(encruption(pwd.value)),
      });
      // 校验通过 密码储存
      if (res === 1) {
        close();
        const PWD_LIST = JSON.parse(storage.getStorage("pwd"));
        PWD_LIST[liveId.value] = pwd.value;
        storage.setStorage("pwd", JSON.stringify(PWD_LIST));
        setTimeout(() => {
          emit("handleCheckRoomPwdSucc", item.value);
        }, 100);
      }
    };
    return {
      item,
      pwd,
      show,
      liveId,
      type,
      close,
      handleCheckRoomPwd,
    };
  },
});
</script>
